<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>红包模板</title>
    <link rel="stylesheet" href="/red/lib/reset.css">
    <link rel="stylesheet" href="/red/lib/css/layui.css">
    <link rel="stylesheet" href="/red/lib/all.css">

    <style type="text/css">
        body{
            background: border-box;
        }
    </style>
</head>
<body>
<div id="money">
    <form class="layui-form mt" id="form1" action="uphbs.html">
        <div class="layui-form-item">
            <label class="layui-form-label">红包名称：</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入红包名称，最多十个字" autocomplete="off"
                       class="layui-input" value="{$redguest->red_name}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">红包类形：</label>
            <div class="layui-input-block">
              <input type="radio" name="sexss" id="sexs_one" value="1"  title="普通红包" {if $redguest->red_status == 1}checked{/if} >
              <input type="radio" name="sexss" id="sexs_one" value="2"  title="随机红包" {if $redguest->red_status == 2}checked{/if} > 
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单个红包金额：</label>
            <div class="layui-input-block">
                <input type="text" name="price" id="red_price" required lay-verify="required" placeholder="最低金额大于0.3" autocomplete="off"
                       class="layui-input" value="{$redguest->red_price}" onkeyup="clearNoNum(this)">
                <span style="margin-left: 20px;font-size: 10px;color: #999;">可输入0.3-200元之间的数字，只支持小数点后两位</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">红包数量：</label>
            <div class="layui-input-block">
                <input type="text" name="size" id="red_size" required lay-verify="required" placeholder="红包数量必须大于1" autocomplete="off"
                       class="layui-input" value="{$redguest->red_size}">
                <span style="margin-left: 20px;font-size: 10px;color: #999;">可输入1-100000之间的数字</span>
            </div>
        </div>
        <input type="hidden" value="{$redguest->id}" name="hidd">
        <div class="layui-form-item">
            <label class="layui-form-label">红包祝福语：</label>
            <div class="layui-input-block">
                <input type="text" name="greeting" id="red_greeting" required lay-verify="required" placeholder="恭喜发财，大吉大利" autocomplete="off" class="layui-input" value="{$redguest->red_greeting}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">领取限制：</label>
            <div class="layui-input-block">
              <input type="radio" name="get" id="is_get_one" value="1" title="仅限新客领取" {if $redguest->red_get == 1}checked{/if}>
              <input type="radio" name="get" id="is_get_tow" value="2" title="新客老客均可领取" {if $redguest->red_get == 2}checked{/if}><br>
              <span style="font-size: 10px;color: #999;">客户首次添加企业成员为好友即可领取：若客户之前添加过企业的任意成员或删除好友重新添加将无法领取红包</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地区限制：</label>
            <div class="layui-input-block">
              <input type="radio" name="areasetting" id="area_one" lay-filter="areasetting" value="1" title="无限制" {if $redguest->red_area == 1}checked{/if}>
              <!-- <input type="radio" name="areasetting" id="area_tow" lay-filter="areasetting"value="2" title="按城市" {if $redguest->red_area == 2}checked{/if}> -->
              <input type="radio" name="areasetting" id="area_tow" lay-filter="areasetting"value="3" title="按城市" {if $redguest->red_area == 3}checked{/if}>
            </div>
        </div>
        <div class="layui-form-item selectAddress" style="display: none;">
            <label class="layui-form-label">地图坐标：</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="lng" id="lng" placeholder="" value="{$redguest->lng}" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="lat" id="lat" placeholder="" value="{$redguest->lat}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item selectAddress" style="display: none;">
            <label class="layui-form-label">地址：</label>
            <div class="layui-input-inline">
                <input type="text" id="address" name="address" value="{$redguest->address}" autocomplete="off" class="layui-input" data-rule-maxlength ="140" style="width: 300px;" />
                
            </div>
            <div class="layui-form-mid layui-word-aux"><a href="javascript:;" style="color: blue;margin-left: 100px;" onclick="codeAddress()">搜索坐标</a></div>
        </div>
        <div class="layui-form-item selectAddress" style="display: none;">
            <label class="layui-form-label"></label>
            <div class="" id="container" style="max-width:600px;min-height:300px;"></div>
        </div>
        <div class="layui-form-item selectAddress" style="display: none;">
            <div class="layui-form-label">距离范围：</div>
            <div class="layui-input-inline" style="width: 200px;">
                <input type="number" class="layui-input"  step="1" min="0" name="distance_range" value="{$redguest->distance_range}" placeholder="请输入距离范围(单位: km)">
            </div>
        </div>
       <!--  <div class="layui-form-item selectCity" id="area-picker" style="display: none;">
            <div class="layui-form-label"></div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province" class="province-selector" data-value="{$area[0]}" lay-filter="province-1">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city" class="city-selector" data-value="{$area[1]}" lay-filter="city-1">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="county" class="county-selector" data-value="{$area[2]}" lay-filter="county-1">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div> -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal submits">修改</button>
            </div>
        </div>
    </form>
</div>
<script src="/red/lib/jquery-3.1.0.min.js"></script>
<script src="/red/lib/layui.js"></script>
<script src="/js/ajax.js"></script>
<script src="/cdn/jquery.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=MLGBZ-2TG32-6KOUF-CIOJ6-BENLJ-Z5BHQ"></script>
<script type="text/javascript">
function clearNoNum(obj) {
    obj.value = obj.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
    obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
    if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
       obj.value = parseFloat(obj.value);
    }
}
</script>
<!-- 省市区 -->
<script>
    //配置插件目录
    layui.config({
        base: '/mods/'
        , version: '1.0'
    });
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'layarea'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker',
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });
    });
    if ($('input[name="areasetting"]:checked').val() == "3") {
        $(".selectAddress").show();
    }
    else if($('input[name="areasetting"]:checked').val() == "1"){
        $(".selectAddress").hide();
    }
</script>
<script type="text/javascript">
        layui.use('form', function(){
          var form = layui.form;
            
          form.render('select');
          
          form.on('select(type)', function(data){
            location.href="quick_reply.html?type="+data.value+"&name="+$('#name').val();
          });

          form.on('radio(areasetting)', function (data) {
                if ($('input[name="areasetting"]:checked').val() == "3") {
                    $(".selectAddress").show();
                }
                else if($('input[name="areasetting"]:checked').val() == "1"){
                	$(".selectAddress").hide();
                }
                form.render();
            });
        });
    </script>
    <script type="text/javascript">
        $(".submits").on("click",function(){
            var formData = $('#form1').serialize(); 
            var params = decodeURIComponent(formData,true);
            console.log(params);
            myAjaxPost(false, true, '', { params:params}, function (resp) {
                if(resp.status == 'success'){
                    alert(resp.msg);
                    window.parent.location.reload(); //刷新父页面
                }else{
                    tusi(resp.msg);
                }
            })
        })
    </script>
    <script type="text/javascript">
    var check=0;
    initssss();
    function codeAddress() {
        check=0;
        var address = document.getElementById("address").value;
        
        //通过getLocation();方法获取位置信息值
        geocoder.getLocation(address);
    }
    function initssss() {
    var lat = "39.916527";
    var lng = "116.397128";
    if("{$redguest->lat}" && "{$redguest->lng}"){
        var lat = "{$redguest->lat}";
        var lng = "{$redguest->lng}";
    }
    var map = new qq.maps.Map(document.getElementById("container"),{

        center: new qq.maps.LatLng(lat,lng),
        zoom: 13
    });
    citylocation = new qq.maps.CityService({
        complete : function(results){
           /* map.setCenter(results.detail.latLng);
            city.style.display = 'inline';
            city.innerHTML = '所在位置: ' + results.detail.name;*/
            console.log(results);
            console.log(111);
            // $("#address").val(results.detail.name); 
        }
    });
    geocoder = new qq.maps.Geocoder({
        complete : function(result){
            console.log(result);
            console.log(result);
            $("#lat").val(result.detail.location.lat);
            $("#lng").val(result.detail.location.lng);
            $("#address").val(result.detail.address);
            map.setCenter(result.detail.location);
            if(check==0){
                var str=result.detail.location+"";
                var lengh=str.indexOf(",");
                var lat=str.substring(0,lengh);
                var lng=str.substring(lengh+2);
            }
        
            var marker = new qq.maps.Marker({
                map:map,
                position: result.detail.location
            });
            qq.maps.event.addListener(map, 'click', function(event) {
            marker.setMap(null);      
            }); 
        }
    });
    //添加监听事件   获取鼠标单击事件
    qq.maps.event.addListener(map, 'click', function(event) {
        check=1;
        $("#lat").val(event.latLng.lat);
        $("#lng").val(event.latLng.lng);
         
        geocoder.getAddress(event.latLng);
        citylocation.searchCityByLatLng(event.latLng);
   
        var marker=new qq.maps.Marker({
            position:event.latLng, 
            map:map
        });    
        qq.maps.event.addListener(map, 'click', function(event) {
             marker.setMap(null);      
        });
    });
}
</script>
</body>

</html>